<template>
	<view id="navbar" class="navbar" :style="{ opacity }">
		<view class="tabs">
			<u-tabs
				:current="props.current"
				:list="tabs"
				:lineColor="PRIMARY_COLOR"
				:activeStyle="activeStyle" 
				:inactiveStyle="inactiveStyle"
				@change="changeTab"
			/>
		</view>
	</view>
	<image class="goback-icon" src="/static/images/common/arrow-left.png"></image>
</template>

<script lang="ts" setup>
	import { ref, reactive, computed } from 'vue';
	import type { Tabs, TabsStyle } from '@/types/interface';
	import { useStore } from 'vuex';
	import { goBack } from '@/utils';
	
	const store = useStore();
	const { PRIMARY_COLOR } = store.state.app;
	const emits = defineEmits(['update:current', 'scroll-page']);
	const props = defineProps({
		current: {
			type: Number,
			default: 0,
		},
		pageScrollTop: {
			type: Number,
			default: 0,
		}
	});
	const tabs = ref<Array<Tabs>>([
		{ name: '商品', disabled: true },
		{ name: '评价', disabled: true },
		{ name: '详情', disabled: true },
		{ name: '推荐', disabled: true },
	]);
	// 导航栏透明度
	const opacity = computed<number>(() => {
		const unit = 1 / 88;
		const opac = props.pageScrollTop * unit;
		if (opac < 1) {
			tabs.value = tabs.value.map(item => ({ ...item, disabled: opac === 0 }));
			return opac;
		};
		return 1;
	});
	const baseStyle = reactive<TabsStyle>({
		fontSize: '28rpx',
		textAlign: 'center',
		padding: '0 !important',
	});
	const activeStyle = reactive<TabsStyle>({
		color: PRIMARY_COLOR,
		fontWeight: 'bold',
		...baseStyle,
	});
	const inactiveStyle = reactive<TabsStyle>({
		color: '#545454',
		fontWeight: '400',
		...baseStyle,
	});
	const changeTab = (e: Tabs): void => {
		emits('scroll-page', e.index);
	};
</script>

<style lang="scss" scoped>
	.navbar {
		width: 100%;
		height: calc(var(--status-bar-height) + 100rpx);
		background: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		position: fixed;
		top: 0;
		z-index: 100;
		opacity: 0;
		.tabs {
			background-color: #FFFFFF;
			display: flex;
			justify-content: center;
			padding-bottom: 8rpx;
		} 
	}
	.goback-icon {
		width: 36rpx;
		height: 35rpx;
		display: block;
		position: fixed;
		left: 40rpx;
		top: calc(var(--status-bar-height) + 34rpx);
		z-index: 100;
	}
</style>